<template>
	<view class="flash-sale-card pr" @click="goRouter('/pages/detail/detail',{id:good.id,type:'flashSale'})">
		<image :src="good.img" mode="aspectFill" class="good-img"></image>
		<view class="df-ac count-container">
			<view class="remain fz32 mr-30"><text>剩余时间 </text>
				<view class="line"></view>
			</view>
			<view class="df-ac c-fff fz18">
				<view class="tag-time">24</view>:
				<view class="tag-time">08</view>:
				<view class="tag-time">16</view>
			</view>
		</view>
		<view class="good-des fz26 c-fff">
			<view class="fz26 mb-5"><text>新品</text>亚麻短上移</view>
			<view class="fz">¥269.00</view>
		</view>
		<view class="cover"></view>
	</view>
</template>

<script>
	export default {
		props: {
			good:{
				type:Object,
				default:()=> {
					return {}
				}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.flash-sale-card {
	border-radius: 30rpx;
	// overflow: hidden;
	margin-right: 30rpx;
	width: 420rpx;
	height: 560rpx;
	position: relative;
	.cover {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-image: linear-gradient(to bottom ,rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 20%, transparent 30%,rgba(0,0,0,.1) 80%, rgba(0,0,0,.5) 100% );
		border-radius: 30rpx;
	}
	.good-img {
		width: 420rpx;
		height: 560rpx;
		border-radius: 30rpx;
	}
	.count-container {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		.remain {
			color: #fff;
			position: relative;
			background-color: transparent;
			text {
				position: relative;
				z-index: 12;
			}
			.line {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 10rpx;
				background-color: #8663E8;
				background-blend-mode: overlay;
			}
		}
		.tag-time {
			font-size: 18rpx;
			width: 33rpx;
			height: 33rpx;
			text-align: center;
			line-height: 33rpx;
			background-color: rgba(0,0,0,.5);
			color: #fff;
		}
		
	}
	.good-des {
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
	}
}
</style>
